<template>
	<div>
		<a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="70%">
			<a-spin :spinning="loading">
				<a-form :form="form">
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="美容师名称" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
                    'name',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="美容师头像" :label-col="labelCol" :wrapper-col="wrapperCol">
								<PreviewImage :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
									:show-upload="formgetFileLength(`avatar`) < 1"
                              accept=".png,.jpg"
									@uploadSuccess="formuploadSuccess($event, `avatar`)" v-decorator="[
                    `avatar`,
                    {
                      rules: [{ required: true, message: '请上传图片', type: 'array' }],
                      initialValue: []
                    }
                  ]" />
							</a-form-item>
						</a-col>
					</a-row>

					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="店铺选择" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-select class="flex-1" placeholder="请选择"
									v-decorator="['storeId', { rules: [{ required: true, message: '请选择',type:'number'}] }]"  @change="selectStore">
									<a-select-option :value="item.id" v-for="(item,index) in store"
										:key="index">{{item.name}} </a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="擅长" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-input placeholder="请输入" v-decorator="[
								  'skillings',
								  {
								    rules: [{ required: true, message: '请输入', whitespace: true }]
								  }
								]" maxLength="30"></a-input>
							</a-form-item>
						</a-col>
					</a-row>
					<a-row :gutter="[24, 0]">
						<a-col :span="12">
							<a-form-item class="mb-15" label="是否支持上门" :label-col="labelCol" :wrapper-col="wrapperCol">
								<a-select class="flex-1" @change="changeSelect" placeholder="请选择"
									v-decorator="['onsit', { rules: [{ required: true, message: '请选择' }] }]">
									<a-select-option :value="0">否</a-select-option>
									<a-select-option :value="1">是</a-select-option>
								</a-select>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item class="mb-15" label="个人简介" :label-col="labelCol" :wrapper-col="wrapperCol">
								<div style="display:flex">
									<a-textarea placeholder="请输入" v-decorator="[
                    'introduction',
                    {
                      rules: [{ required: true, message: '请输入', whitespace: true }]
                    }
                  ]" maxLength="300"></a-textarea>
								</div>
							</a-form-item>
						</a-col>
					</a-row>
          <a-row :gutter="[24, 0]">
          <a-col :span="12">
          	<a-form-item class="mb-15" label="职位名称" :label-col="labelCol" :wrapper-col="wrapperCol">
          		<a-input placeholder="请输入" v-decorator="[
                  'jobTitle',
                  {
                    rules: [{ required: true, message: '请输入', whitespace: true }]
                  }
                ]" maxLength="30"></a-input>
          	</a-form-item>
          </a-col>
          
          <a-col :span="12" style="display: none;">
          	<a-form-item class="mb-15" label="店铺名称" :label-col="labelCol" :wrapper-col="wrapperCol">
          		<a-input placeholder="请输入" v-decorator="[
                  'storeName',
                ]" maxLength="30"></a-input>
          	</a-form-item>
          </a-col>

			</a-row>
				</a-form>
			</a-spin>
		</a-modal>
	</div>
</template>
<script>
	import {
		get
	} from 'lodash'
	import {
		getStoreList,
		addStaff,
		updateStaff
	} from '@/api/newPet'
	export default {
		data() {
			return {
				loading: false,
				isShow: true,
				labelCol: {
					span: 8
				},
				wrapperCol: {
					span: 16
				},
				details: {},
				showModal: false,
				titles: '新增',
				info: {},
				form: this.$form.createForm(this),
				store: []
			}
		},
		computed: {},
		watch: {},
		async created() {},

		methods: {
    selectStore(id){
      let _this=  this;
        this.store.forEach((item) => {
          if(item.id ==id){
            
            _this.form.setFieldsValue({
            	storeName: item.name,
            })
          
          }
        })
    },
			formgetFileLength(type) {
				//获取图片
				return get(this.form.getFieldValue(type), 'length') || 0
			},
			formuploadSuccess(data, type) {
				this.form.setFieldsValue({
					[type]: [data.path]
				})
			},

			cancel() {
				this.form.resetFields()
				this.showModal = false
			},
			confirmOk() {
				this.form.validateFields((err, values) => {
					if (!err) {
						// this.loading = true
						const {
							info
						} = this
						if (values.time) {
							values.timeStart = this.$utils.getStartTime(values.time[0])
							values.timeEnd = this.$utils.getEndTime(values.time[1])
						}
						let data = {
							id: info && info.id ? info.id : undefined,
							...this.$utils.trimValue(values),
							isEnabled: typeof values.isEnabled === 'undefined' ? true : values.isEnabled,
							avatar:values.avatar[0]
						}
						console.log(data)
						// return
						if(data.id){
							updateStaff(data).then(()=>{
								this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
								this.$emit('upload')
								this.cancel()
							}).finally(() => {
								this.loading = false
							})
						}
						else{
							addStaff(data).then(()=>{
								this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
								this.$emit('upload')
								this.cancel()
							}).finally(() => {
								this.loading = false
							})
						}
					}
				})
			},

			open(data) {
				this.get_store()
				this.info = data
				console.log(data, '111111')
				if (data.id) {
					this.titles = '修改'
				} else {
					this.titles = '新增'
				}
				this.showModal = true
				// images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']
				this.$nextTick(() => {
					this.form.setFieldsValue({
						isEnabled: true,
						...data,
						avatar: [data.avatar]
					})
				})

			},
			get_store() {
				getStoreList({
					pageNo: 1,
					pageSize: 100
				}).then(res => {
					this.store = res.list;
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .ant-form-item-label {
		// width: 100px;
	}
</style>